<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      display: inline-block;
      list-style: none;
    }

    .box {
      background-color: red;
      margin: 100px auto;
    }
  </style>
</head>

<body>
  <div class="box">
    <script>
      let datas = [
        { name: '司马懿', imgSrc: '../image/1.webp' },
        { name: '女娲', imgSrc: '../image/2.webp' },
        { name: '百里守约', imgSrc: '../image/3.webp' },
        { name: '亚瑟', imgSrc: '../image/4.webp' },
        { name: '虞姬', imgSrc: '../image/5.webp' },
        { name: '张良', imgSrc: '../image/6.webp' },
        { name: '安其拉', imgSrc: '../image/7.webp' },
        { name: '李白', imgSrc: '../image/8.webp' },
        { name: '阿珂', imgSrc: '../image/9.webp' },
        { name: '墨子', imgSrc: '../image/10.webp' },
        { name: '鲁班', imgSrc: '../image/11.webp' },
        { name: '嬴政', imgSrc: '../image/12.webp' },
        { name: '孙膑', imgSrc: '../image/13.webp' },
        { name: '周瑜', imgSrc: '../image/14.webp' },
        { name: 'XXX', imgSrc: '../image/15.webp' },
        { name: 'XXX', imgSrc: '../image/16.webp' },
        { name: 'XXX', imgSrc: '../image/17.webp' },
        { name: 'XXX', imgSrc: '../image/18.webp' },
        { name: 'XXX', imgSrc: '../image/19.webp' },
        { name: 'XXX', imgSrc: '../image/20.webp' }
      ]
      for (let i = 0; i < datas.length; i++) {
        document.write(`
          <li>
            <a href="#">
              <img src="${datas[i].imgSrc}" alt="">
              <h4>
                ${datas[i].name}
              </h4>
            </a>
            </a>
          </li>
          `)
      }
    </script>
  </div>
</body>

</html>